<template>
  <div class="toolbar-container">
    <div class="left-toolbar">
      <el-button link type="primary" :disabled="undoDisabled" :title="i18nt('designer.toolbar.undoHint')" @click="undoHistory">
        <VfIcon name="undo" /></el-button>
      <el-button link type="primary" :disabled="redoDisabled" :title="i18nt('designer.toolbar.redoHint')" @click="redoHistory">
        <VfIcon name="redo" /></el-button>
      <!-- <el-button-group style="margin-left: 20px">
        <el-button :type="layoutType === 'PC' ? 'info': ''" @click="changeLayoutType('PC')">
          {{i18nt('designer.toolbar.pcLayout')}}</el-button>
        <el-button :type="layoutType === 'Pad' ? 'info': ''" @click="changeLayoutType('Pad')">
          {{i18nt('designer.toolbar.padLayout')}}</el-button>
        <el-button :type="layoutType === 'H5' ? 'info': ''" @click="changeLayoutType('H5')">
          {{i18nt('designer.toolbar.mobileLayout')}}</el-button>
      </el-button-group> -->
      <el-button style="margin-left: 20px;margin-top: 4px;" :title="i18nt('designer.toolbar.nodeTreeHint')" @click="showNodeTreeDrawer">
        <VfIcon name="node-tree" /></el-button>
    </div>

    <div class="right-toolbar">
      <div class="right-toolbar-con">
        <el-button link type="primary" @click="testLogin" v-if="!prodEnv">登录</el-button>
        <el-button v-if="showToolButton('clearDesignerButton')" link type="primary" @click="clearFormWidget">
          <VfIcon name="iv-icon-delete" />{{i18nt('designer.toolbar.clear')}}</el-button>
        <el-button v-if="showToolButton('previewFormButton')" link type="primary" @click="previewForm">
          <VfIcon name="iv-icon-view" />{{i18nt('designer.toolbar.preview')}}</el-button>
        <el-button v-if="showToolButton('importJsonButton') && !importJsonButtonHidden" link type="primary" @click="importJson">
          {{i18nt('designer.toolbar.importJson')}}</el-button>
        <el-button v-if="showToolButton('exportJsonButton') && !exportJsonButtonHidden" link type="primary" @click="exportJson">
          {{i18nt('designer.toolbar.exportJson')}}</el-button>
        <el-button v-if="showToolButton('exportCodeButton')" link type="primary" @click="exportCode">
          {{i18nt('designer.toolbar.exportCode')}}</el-button>
        <el-button v-if="showToolButton('generateSFCButton')" link type="primary" @click="generateSFC">
          <VfIcon name="iv-icon-sfc" />{{i18nt('designer.toolbar.generateSFC')}}</el-button>
        <template v-for="(idx, slotName) in $slots">
          <slot :name="slotName"></slot>
        </template>
      </div>
    </div>

    <el-drawer :title="i18nt('designer.toolbar.nodeTreeTitle')" direction="ltr" v-model="showNodeTreeDrawerFlag" :modal="true" :size="280"
              :destroy-on-close="true" class="node-tree-drawer">
      <el-tree ref="nodeTree" :data="nodeTreeData" node-key="id" default-expand-all highlight-current class="node-tree"
              icon-class="el-icon-arrow-right" @node-click="onNodeTreeClick"></el-tree>
    </el-drawer>
    <PreviewFormDialog
      :visible="showPreviewDialogFlag"
      :form-json="formJson"
      :form-data="testFormData"
      :busiConfig="busiConfig"
      :enumsConfig="{ dataPools: enumsDataPools }"
      @close="showPreviewDialogFlag = false"
      >
    </PreviewFormDialog>
    <!--<div v-if="showPreviewDialogFlag"
      v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
       <el-dialog :title="i18nt('designer.toolbar.preview')" v-model="showPreviewDialogFlag"
                :show-close="true" :close-on-click-modal="false" :close-on-press-escape="false" center
                :destroy-on-close="true" :append-to-body="true" class="drag-dialog small-padding-dialog v-from-dialog" width="75%"
                :fullscreen="(layoutType === 'H5') || (layoutType === 'Pad')">
        <div>
          <div class="form-render-wrapper" :class="[layoutType === 'H5' ? 'h5-layout' : (layoutType === 'Pad' ? 'pad-layout' : '')]">
            <VFormRender ref="preForm"
              :form-json="formJson"
              :form-data="testFormData"
              :global-dsv="designerDsv"
              :option-data="testOptionData"
              :preview-state="true"
              :enumsDataConfig="{ dataPools: enumsDataPools }"
              @myEmitTest="onMyEmitTest"
              @formChange="handleFormChange"
              @buttonClick="testOnButtonClick"
              @appendButtonClick="testOnAppendButtonClick"
            >
            </VFormRender>
          </div>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="getFormData">{{i18nt('designer.hint.getFormData')}}</el-button>
            <el-button type="primary" @click="resetForm">{{i18nt('designer.hint.resetForm')}}</el-button>
            <el-button type="primary" @click="setFormDisabled">{{i18nt('designer.hint.disableForm')}}</el-button>
            <el-button type="primary" @click="setFormEnabled">{{i18nt('designer.hint.enableForm')}}</el-button>
            <el-button @click="showPreviewDialogFlag = false">{{i18nt('designer.hint.closePreview')}}</el-button>
            <el-button v-if="false" @click="testLoadForm">Test Load</el-button>
            <el-button v-if="false" @click="testSetFormJson">Test SFJ</el-button>
            <el-button v-if="false" @click="testSetFormData">Test SFD</el-button>
            <el-button v-if="false" @click="testReloadOptionData">Test ROD</el-button>
          </div>
        </template>
      </el-dialog>
    </div> -->

    <!-- 导入弹窗 -->
    <div v-if="importDialogStore.visible">
      <vxe-modal
        :="dialogAttrs"
        :title="importDialogStore.title"
        v-model="importDialogStore.visible"
      >
        <el-alert :="importDialogStore.alertAttrs"></el-alert>
        <AceCodeEditor :mode="'json'" :readonly="false" v-model="importTemplate"></AceCodeEditor>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="doJsonImport">
              {{importDialogStore.footerBtns.btn1.text}}
            </el-button>
            <el-button @click="importDialogStore.visible = false">
              {{importDialogStore.footerBtns.btn2.text}}
            </el-button>
          </div>
        </template>
      </vxe-modal>
    </div>

    <!-- 导出弹窗 -->
    <div v-if="exportDialogStore.visible" >
      <vxe-modal
        :="dialogAttrs"
        :title="exportDialogStore.title"
        v-model="exportDialogStore.visible"
      >
        <AceCodeEditor :mode="'json'" :readonly="true" v-model="jsonContent"></AceCodeEditor>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" class="copy-json-btn" :data-clipboard-text="jsonRawContent" @click="copyFormJson">
              {{exportDialogStore.footerBtns.btn1.text}}
            </el-button>
            <el-button @click="saveFormJson">
              {{exportDialogStore.footerBtns.btn2.text}}
            </el-button>
            <el-button @click="exportDialogStore.visible = false">
              {{exportDialogStore.footerBtns.btn3.text}}
            </el-button>
          </div>
        </template>
      </vxe-modal>
    </div>

    <!-- 导出代码弹窗 -->
    <div v-if="exportCodeDialogStore.visible">
      <vxe-modal
        :="dialogAttrs"
        :title="exportCodeDialogStore.title"
        v-model="exportCodeDialogStore.visible"
      >
        <el-tabs type="border-card" class="no-box-shadow no-padding" v-model="activeCodeTab">
          <el-tab-pane label="Vue" name="vue">
            <AceCodeEditor :mode="'html'" :readonly="true" v-model="vueCode" :user-worker="false"></AceCodeEditor>
          </el-tab-pane>
          <el-tab-pane label="HTML" name="html">
            <AceCodeEditor :mode="'html'" :readonly="true" v-model="htmlCode" :user-worker="false"></AceCodeEditor>
          </el-tab-pane>
        </el-tabs>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" class="copy-vue-btn" :data-clipboard-text="vueCode" @click="copyVueCode">
              {{exportCodeDialogStore.footerBtns.btn1.text}}
            </el-button>
            <el-button type="primary" class="copy-html-btn" :data-clipboard-text="htmlCode" @click="copyHtmlCode">
              {{exportCodeDialogStore.footerBtns.btn2.text}}
            </el-button>
            <el-button @click="saveVueCode">
              {{exportCodeDialogStore.footerBtns.btn3.text}}
            </el-button>
            <el-button @click="saveHtmlCode">
              {{exportCodeDialogStore.footerBtns.btn4.text}}
            </el-button>
            <el-button @click="exportCodeDialogStore.visible = false">
              {{exportCodeDialogStore.footerBtns.btn5.text}}
            </el-button>
          </div>
        </template>
      </vxe-modal>
    </div>

    <!-- 生成SFC弹窗 -->
    <div v-if="exportSFCDialogStore.visible" >
      <vxe-modal :="dialogAttrs" :title="exportSFCDialogStore.title" v-model="exportSFCDialogStore.visible" >
        <el-tabs type="border-card" class="no-box-shadow no-padding" v-model="activeSFCTab">
          <el-tab-pane label="Vue2" name="vue2">
            <AceCodeEditor :mode="'html'" :readonly="true" v-model="sfcCode" :user-worker="false"></AceCodeEditor>
          </el-tab-pane>
          <el-tab-pane label="Vue3" name="vue3">
            <AceCodeEditor :mode="'html'" :readonly="true" v-model="sfcCodeV3" :user-worker="false"></AceCodeEditor>
          </el-tab-pane>
        </el-tabs>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" class="copy-vue2-sfc-btn" :data-clipboard-text="sfcCode" @click="copyV2SFC">
              {{exportSFCDialogStore.footerBtns.btn1.text}}
            </el-button>
            <el-button type="primary" class="copy-vue3-sfc-btn" :data-clipboard-text="sfcCodeV3" @click="copyV3SFC">
              {{exportSFCDialogStore.footerBtns.btn2.text}}
            </el-button>
            <el-button @click="saveV2SFC">
              {{exportSFCDialogStore.footerBtns.btn3.text}}
            </el-button>
            <el-button @click="saveV3SFC">
              {{exportSFCDialogStore.footerBtns.btn4.text}}
            </el-button>
            <el-button @click="exportSFCDialogStore.visible = false">
              {{exportSFCDialogStore.footerBtns.btn5.text}}
            </el-button>
          </div>
        </template>
      </vxe-modal>
    </div>

    <!-- 展示表单数据弹窗 -->
    <div v-if="exportFormDialogStore.visible"  >
      <vxe-modal :="dialogAttrs" :title="exportFormDialogStore.title" v-model="exportFormDialogStore.visible" >
        <div style="border: 1px solid #DCDFE6">
          <AceCodeEditor :mode="'json'" :readonly="true" v-model="formDataJson"></AceCodeEditor>
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" class="copy-form-data-json-btn" :data-clipboard-text="formDataRawJson" @click="copyFormDataJson">
              {{exportSFCDialogStore.footerBtns.btn1.text}}
            </el-button>
            <el-button @click="saveFormData">
              {{exportSFCDialogStore.footerBtns.btn2.text}}
            </el-button>
            <el-button @click="exportFormDialogStore.visible = false">
              {{exportSFCDialogStore.footerBtns.btn3.text}}
            </el-button>
          </div>
        </template>
      </vxe-modal>
    </div>

  </div>
</template>

<script>
  import Clipboard from 'clipboard'
  import VFormRender from '@/components/form-render/index'
  import { AceCodeEditor } from '@/components/vf-editor'
  import { PreviewFormDialog } from '@/components/dialogs'

  import {
    generateId, getQueryParam,
    deepClone, copyToClipboard,
    traverseAllWidgets, addWindowResizeHandler
  } from "@/utils/util"
  import { VfMessage } from '@/utils/vf-utils'

  import i18nModule, { i18n } from '@/utils/i18n'
  import { saveAs } from 'file-saver'
  import { genSFC } from "@/utils/sfc-generator"
  import { generateCode } from "@/utils/code-generator"

  import { baseAttrs } from '@/components/dialogs/cfg/base-cofig.js'
  import { useLoginApi } from '@/api/api-login'

  import loadBeautifier from "@/utils/beautifierLoader"

  export default {
    name: "ToolbarPanel",
    mixins: [i18nModule],
    components: {
      PreviewFormDialog,
      VFormRender,
      AceCodeEditor,
      Clipboard,
    },
    props: {
      designer: Object,
      globalDsv: {
        type: Object,
        default: () => ({})
      },
    },
    inject: ['getDesignerConfig', 'enumsDataPools', 'busiConfig'],
    data() {
      return {
        designerConfig: this.getDesignerConfig(),

        // 添加按钮显示状态控制属性
        importJsonButtonHidden: false,
        exportJsonButtonHidden: false,
        
        dialogAttrs: {
          // class: 'drag-dialog small-padding-dialog rk-form-designer-dialog',
          // center: true,
          // showClose: true,
          // appendToBody: true,
          // destroyOnClose: true,
          // closeOnClickModal: false,
          // closeOnPressEscape: false,
          ...baseAttrs,
          className: `${baseAttrs.className} vf-setting-dialog`
        },
        dialogStore: {
          dragClass: ['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header'],
        },
        // 按钮显示状态控制
        importJsonButtonHidden: false,
        exportJsonButtonHidden: false,
        // 导入弹窗的数据配置
        importDialogStore: {
          title: i18n.$st('designer.toolbar.importJson'),
          visible: false,
          alertAttrs: {
            type: 'info',
            title: i18n.$st('designer.hint.importJsonHint'),
            class: 'alert-padding',
            showIcon: true,
            closable: false,
          },
          footerBtns: {
            btn1: {
              text: i18n.$st('designer.hint.import')
            },
            btn2: {
              text: i18n.$st('designer.hint.cancel')
            },
          }
        },
        // 导出弹窗的数据配置
        exportDialogStore: {
          title: i18n.$st('designer.toolbar.exportJson'),
          visible: false,
          footerBtns: {
            btn1: {
              text: i18n.$st('designer.hint.copyJson'),
            },
            btn2: {
              text: i18n.$st('designer.hint.saveFormJson'),
            },
            btn3: {
              text: i18n.$st('designer.hint.closePreview'), 
            },
          }
        },
        // 导出代码弹窗的数据配置
        exportCodeDialogStore: {
          title: i18n.$st('designer.toolbar.exportCode'),
          visible: false,
          footerBtns: {
            btn1: {
              text: i18n.$st('designer.hint.copyVueCode'),
            },
            btn2: {
              text: i18n.$st('designer.hint.copyHtmlCode'),
            },
            btn3: {
              text: i18n.$st('designer.hint.saveVueCode'), 
            },
            btn4: {
              text: i18n.$st('designer.hint.saveHtmlCode'), 
            },
            btn5: {
              text: i18n.$st('designer.hint.closePreview'), 
            },
          }
        },
        // 导出SFC代码弹窗的数据配置
        exportSFCDialogStore: {
          title: i18n.$st('designer.toolbar.generateSFC'),
          visible: false,
          footerBtns: {
            btn1: {
              text: i18n.$st('designer.hint.copyVue2SFC'),
            },
            btn2: {
              text: i18n.$st('designer.hint.copyVue3SFC'),
            },
            btn3: {
              text: i18n.$st('designer.hint.saveVue2SFC'), 
            },
            btn4: {
              text: i18n.$st('designer.hint.saveVue3SFC'), 
            },
            btn5: {
              text: i18n.$st('designer.hint.closePreview'), 
            },
          }
        },

        exportFormDialogStore: {
          title: i18n.$st('designer.hint.exportFormData'),
          visible: false,
          footerBtns: {
            btn1: {
              text: i18n.$st('designer.hint.copyFormData'),
            },
            btn2: {
              text: i18n.$st('designer.hint.saveFormData'),
            },
            btn3: {
              text: i18n.$st('designer.hint.closePreview'), 
            },
          }
        },

        toolbarWidth: 460,
        showPreviewDialogFlag: false,
        showNodeTreeDrawerFlag: false,

        nodeTreeData: [],

        importTemplate: '',
        jsonContent: '',
        jsonRawContent: '',

        formDataJson: '',
        formDataRawJson: '',

        vueCode: '',
        htmlCode: '',

        sfcCode: '',
        sfcCodeV3: '',

        activeCodeTab: 'vue',
        activeSFCTab: 'vue2',

        testFormData: {
          // 'userName': '666888',
          // 'productItems': [
          //   {'pName': 'iPhone12', 'pNum': 10},
          //   {'pName': 'P50', 'pNum': 16},
          // ]
          'select62173': 2,
          // 'FUND_INVEST_AREA_CODE': '0301'
        },
        testOptionData: {
          'select62173': [
            {label: '01', value: 1},
            {label: '22', value: 2},
            {label: '333', value: 3},
          ],

          'select001': [
            {label: '辣椒', value: 1},
            {label: '菠萝', value: 2},
            {label: '丑橘子', value: 3},
          ],
        },

      }
    },
    computed: {
      prodEnv () {
        return import.meta.env.PROD
      },
      formJson() {
        return {
          // widgetList: this.designer.widgetList,
          // formConfig: this.designer.formConfig
          widgetList: deepClone(this.designer.widgetList),
          formConfig: deepClone(this.designer.formConfig)
        }
      },

      undoDisabled() {
        return !this.designer.undoEnabled()
      },

      redoDisabled() {
        return !this.designer.redoEnabled()
      },

      layoutType() {
        return this.designer.getLayoutType()
      },

      designerDsv() {
        return this.globalDsv
      }

    },
    watch: {
      'designer.widgetList': {
        deep: true,
        handler(val) {
          //console.log('test-----', val)
          //this.refreshNodeTree()
        }
      },

    },
    mounted() {
      let maxTBWidth = this.designerConfig.toolbarMaxWidth || 460
      let minTBWidth = this.designerConfig.toolbarMinWidth || 300
      let newTBWidth = window.innerWidth - 260 - 300 - 320 - 80
      this.toolbarWidth = newTBWidth >= maxTBWidth ? maxTBWidth : (newTBWidth <= minTBWidth ? minTBWidth : newTBWidth)
      addWindowResizeHandler(() => {
        this.$nextTick(() => {
          let newTBWidth2 = window.innerWidth - 260 - 300 - 320 - 80
          this.toolbarWidth = newTBWidth2 >= maxTBWidth ? maxTBWidth : (newTBWidth2 <= minTBWidth ? minTBWidth : newTBWidth2)
        })
      })
    },
    methods: {
      testLogin() {
        useLoginApi().login()
      },
      showToolButton(configName) {
        if (this.designerConfig[configName] === undefined) {
          // 特殊处理importJsonButton，支持通过方法控制显示状态
          if (configName === 'importJsonButton' && this.importJsonButtonHidden !== undefined) {
            return !this.importJsonButtonHidden
          }
          if (configName === 'exportJsonButton' && this.exportJsonButtonHidden !== undefined) {
            return !this.exportJsonButtonHidden
          }
          return true
        }
        return !!this.designerConfig[configName]
      },

      // 添加控制导入JSON按钮显示状态的方法
      setImportJsonButton(visible) {
        // 设置导入JSON按钮的显示状态
        this.importJsonButtonHidden = !visible
      },
      
      // 添加控制导出JSON按钮显示状态的方法
      setExportJsonButton(visible) {
        // 设置导出JSON按钮的显示状态
        this.exportJsonButtonHidden = !visible
      },

      buildTreeNodeOfWidget(widget, treeNode) {
        let curNode = {
          id: widget.id,
          label: widget.options.label || widget.type,
          //selectable: true,
        }
        treeNode.push(curNode)

        if (widget.category === undefined) {
          return
        }

        curNode.children = []
        if (widget.type === 'grid') {
          widget.cols.map(col => {
            let colNode = {
              id: col.id,
              label: col.options.name || widget.type,
              children: []
            }
            curNode.children.push(colNode)
            col.widgetList.map(wChild => {
              this.buildTreeNodeOfWidget(wChild, colNode.children)
            })
          })
        } else if (widget.type === 'table') {
          //TODO: 需要考虑合并单元格！！
          widget.rows.map(row => {
            let rowNode = {
              id: row.id,
              label: 'table-row',
              selectable: false,
              children: [],
            }
            curNode.children.push(rowNode)

            row.cols.map(cell => {
              if (!!cell.merged) {  //跳过合并单元格！！
                return
              }

              let rowChildren = rowNode.children
              let cellNode = {
                id: cell.id,
                label: 'table-cell',
                children: []
              }
              rowChildren.push(cellNode)

              cell.widgetList.map(wChild => {
                this.buildTreeNodeOfWidget(wChild, cellNode.children)
              })
            })
          })
        } else if (widget.type === 'tab') {
          widget.tabs.map(tab => {
            let tabNode = {
              id: tab.id,
              label: tab.options.name || widget.type,
              selectable: false,
              children: []
            }
            curNode.children.push(tabNode)
            tab.widgetList.map(wChild => {
              this.buildTreeNodeOfWidget(wChild, tabNode.children)
            })
          })
        } else if (widget.type === 'sub-form') {
          widget.widgetList.map(wChild => {
            this.buildTreeNodeOfWidget(wChild, curNode.children)
          })
        }
        else if (widget.type === 'layout-full') {
          widget.widgetList.asideList.forEach(item => {
            this.buildTreeNodeOfWidget(item, curNode.children)
          })
          widget.widgetList.headerLeftList.forEach(item => {
            this.buildTreeNodeOfWidget(item, curNode.children)
          })
          widget.widgetList.headerRightList.forEach(item => {
            this.buildTreeNodeOfWidget(item, curNode.children)
          })
          widget.widgetList.conditionLeftList.forEach(item => {
            this.buildTreeNodeOfWidget(item, curNode.children)
          })
          widget.widgetList.conditionRightList.forEach(item => {
            this.buildTreeNodeOfWidget(item, curNode.children)
          })
          widget.widgetList.mainUpList.forEach(item => {
            this.buildTreeNodeOfWidget(item, curNode.children)
          })
          widget.widgetList.mainDownList.forEach(item => {
            this.buildTreeNodeOfWidget(item, curNode.children)
          })
          widget.widgetList.downConditionLeftList.forEach(item => {
            this.buildTreeNodeOfWidget(item, curNode.children)
          })
          widget.widgetList.downConditionRightList.forEach(item => {
            this.buildTreeNodeOfWidget(item, curNode.children)
          })
          widget.widgetList.footerList.forEach(item => {
            this.buildTreeNodeOfWidget(item, curNode.children)
          })
        } 
        else if (widget.type === 'layout-left-right') {
          widget.widgetList.map(wChild => {
            this.buildTreeNodeOfWidget(wChild, curNode.children)
          })
        } 
        else if (widget.type === 'layout-sync') {//表单同步布局
          widget.widgetList.map(wChild => {
            this.buildTreeNodeOfWidget(wChild, curNode.children)
          })
        } 
        else if (widget.category === 'container') {  //自定义容器
          widget.widgetList.map(wChild => {
            this.buildTreeNodeOfWidget(wChild, curNode.children)
          })
        }
      },

      refreshNodeTree() {
        this.nodeTreeData.length = 0
        this.designer.widgetList.forEach(wItem => {
          this.buildTreeNodeOfWidget(wItem, this.nodeTreeData)
        })
      },

      showNodeTreeDrawer() {
        this.refreshNodeTree()
        this.showNodeTreeDrawerFlag = true
        this.$nextTick(() => {
          if (!!this.designer.selectedId) {  //同步当前选中组件到节点树！！！
            this.$refs.nodeTree.setCurrentKey(this.designer.selectedId)
          }
        })
      },

      undoHistory() {
        this.designer.undoHistoryStep()
      },

      redoHistory() {
        this.designer.redoHistoryStep()
      },

      changeLayoutType(newType) {
        this.designer.changeLayoutType(newType)
      },

      clearFormWidget() {
        this.designer.clearDesigner()
        this.designer.formWidget.clearWidgetRefList()
      },

      previewForm() {
        this.showPreviewDialogFlag = true
      },

      saveAsFile(fileContent, defaultFileName) {
        this.$prompt(this.i18nt('designer.hint.fileNameForSave'), this.i18nt('designer.hint.saveFileTitle'), {
          inputValue: defaultFileName,
          closeOnClickModal: false,
          inputPlaceholder: this.i18nt('designer.hint.fileNameInputPlaceholder')
        }).then(({ value }) => {
          if (!value) {
            value = defaultFileName
          }

          if (getQueryParam('vscode') == 1) {
            this.vsSaveFile(value, fileContent)
            return
          }

          const fileBlob = new Blob([fileContent], { type: 'text/plain;charset=utf-8' })
          saveAs(fileBlob ,value)
        }).catch(() => {
          //
        })
      },

      vsSaveFile(fileName, fileContent) {
        const msgObj = {
          cmd: 'writeFile',
          data: {
            fileName,
            code: fileContent
          }
        }
        window.parent.postMessage(msgObj, '*')
      },

      importJson() {
        this.importTemplate = JSON.stringify(this.designer.getImportTemplate(), null, '  ')
        this.importDialogStore.visible = true
      },

      doJsonImport() {
        try {
          let importObj = JSON.parse(this.importTemplate)
          //console.log('test import', this.importTemplate)
          if (!importObj || !importObj.formConfig) {
            throw new Error( this.i18nt('designer.hint.invalidJsonFormat') )
          }

          let fJsonVer = importObj.formConfig.jsonVersion
          if (!fJsonVer || (fJsonVer !== 3)) {
            throw new Error( this.i18nt('designer.hint.jsonVersionMismatch') )
          }

          this.designer.loadFormJson(importObj)

          this.importDialogStore.visible = false
          VfMessage.success(this.i18nt('designer.hint.importJsonSuccess'))

          this.designer.emitHistoryChange()

          this.designer.emitEvent('form-json-imported', [])
        } catch(ex) {
          VfMessage.error(ex + '')
        }
      },

      exportJson() {
        let widgetList = deepClone(this.designer.widgetList)
        let formConfig = deepClone(this.designer.formConfig)
        this.jsonContent = JSON.stringify({widgetList, formConfig}, null, '  ')
        this.jsonRawContent = JSON.stringify({widgetList, formConfig})
        this.exportDialogStore.visible = true
      },

      copyFormJson(e) {
        copyToClipboard(this.jsonRawContent, e,
            VfMessage,
            this.i18nt('designer.hint.copyJsonSuccess'),
            this.i18nt('designer.hint.copyJsonFail')
        )
      },

      saveFormJson() {
        this.saveAsFile(this.jsonContent, `vform${generateId()}.json`)
      },

      exportCode() {
        this.vueCode = generateCode(this.formJson)
        this.htmlCode = generateCode(this.formJson, 'html')
        this.exportCodeDialogStore.visible = true
      },

      copyVueCode(e) {
        copyToClipboard(this.vueCode, e,
            VfMessage,
            this.i18nt('designer.hint.copyVueCodeSuccess'),
            this.i18nt('designer.hint.copyVueCodeFail')
        )
      },

      copyHtmlCode(e) {
        copyToClipboard(this.htmlCode, e,
            VfMessage,
            this.i18nt('designer.hint.copyHtmlCodeSuccess'),
            this.i18nt('designer.hint.copyHtmlCodeFail')
        )
      },

      saveVueCode() {
        this.saveAsFile(this.vueCode, `vform${generateId()}.vue`)
      },

      saveHtmlCode() {
        this.saveAsFile(this.htmlCode, `vform${generateId()}.html`)
      },

      generateSFC() {
        loadBeautifier(beautifier => {
          this.sfcCode = genSFC(this.designer.formConfig, this.designer.widgetList, beautifier)
          this.sfcCodeV3 = genSFC(this.designer.formConfig, this.designer.widgetList, beautifier, true)
          this.exportSFCDialogStore.visible = true
        })
      },

      copyV2SFC(e) {
        copyToClipboard(this.sfcCode, e,
            VfMessage,
            this.i18nt('designer.hint.copySFCSuccess'),
            this.i18nt('designer.hint.copySFCFail')
        )
      },

      copyV3SFC(e) {
        copyToClipboard(this.sfcCodeV3, e,
            VfMessage,
            this.i18nt('designer.hint.copySFCSuccess'),
            this.i18nt('designer.hint.copySFCFail')
        )
      },

      saveV2SFC() {
        this.saveAsFile(this.sfcCode, `vformV2-${generateId()}.vue`)
      },

      saveV3SFC() {
        this.saveAsFile(this.sfcCodeV3, `vformV3-${generateId()}.vue`)
      },

      getFormData() {
        const filedWidgets = this.$refs['preForm'].getFieldWidgets()
        this.$refs['preForm'].getFormData().then(formData => {
          this.formDataJson = JSON.stringify(formData, null, '  ')
          this.formDataRawJson = JSON.stringify(formData)
          this.exportFormDialogStore.visible = true
        }).catch(error => {
          VfMessage.error(error)
        })
      },

      copyFormDataJson(e) {
        copyToClipboard(this.formDataRawJson, e,
            VfMessage,
            this.i18nt('designer.hint.copyJsonSuccess'),
            this.i18nt('designer.hint.copyJsonFail')
        )
      },

      saveFormData() {
        this.saveAsFile(this.htmlCode, `formData${generateId()}.json`)
      },

      resetForm() {
        this.$refs['preForm'].resetForm()
      },

      setFormDisabled() {
        this.$refs['preForm'].disableForm()
      },

      setFormEnabled() {
        this.$refs['preForm'].enableForm()
      },


      testLoadForm() {
        this.$refs.preForm.setFormData({
          PRO_NAME: '算法将受到法律的救死扶伤的'
        })
        // axios.get('https://www.fastmock.site/mock/e9710039bb5f11262d1a0f2f0bbe08c8/vform3/getFS').then(res => {
        //   let newFormJson = res.data
        //   this.$refs.preForm.setFormJson(newFormJson)
        //   // let newFormData = {'input30696': '668899'}
        //   // this.$refs.preForm.setFormData(newFormData)

        //   console.log('test', 'aaaaaaaa')
        //   this.$nextTick(() => {
        //     let newFormData = {'input30696': '668899'}
        //     this.$refs.preForm.setFormData(newFormData)
        //   })
        // }).catch(err => {
        //   //
        // })
      },

      testSetFormJson() {
        let newFormJson = {"widgetList":[{"type":"static-text","icon":"static-text","formItemFlag":false,"options":{"name":"statictext111193","columnWidth":"200px","hidden":false,"textContent":"多列表单","customClass":[],"onCreated":"","onMounted":"","label":"static-text"},"id":"statictext111193"},{"type":"divider","icon":"divider","formItemFlag":false,"options":{"name":"divider102346","label":"","columnWidth":"200px","direction":"horizontal","contentPosition":"center","hidden":false,"customClass":[],"onCreated":"","onMounted":""},"id":"divider102346"},{"type":"grid","category":"container","icon":"grid","cols":[{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"type":"input","icon":"text-field","formItemFlag":true,"options":{"name":"input12931","label":"发件人姓名","labelAlign":"","type":"text","defaultValue":"","placeholder":"","columnWidth":"200px","size":"","labelWidth":null,"labelHidden":false,"readonly":false,"disabled":false,"hidden":false,"clearable":true,"showPassword":false,"required":true,"validation":"","validationHint":"","customClass":[],"labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"minLength":null,"maxLength":null,"showWordLimit":false,"prefixIcon":"","suffixIcon":"","appendButton":false,"appendButtonDisabled":false,"buttonIcon":"el-icon-search","onCreated":"","onMounted":"","onInput":"","onChange":"","onFocus":"","onBlur":"","onValidate":""},"id":"input12931"}],"options":{"name":"gridCol25469","hidden":false,"span":12,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":[]},"id":"grid-col-25469"},{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"type":"input","icon":"text-field","formItemFlag":true,"options":{"name":"input23031","label":"发件人号码","labelAlign":"","type":"text","defaultValue":"","placeholder":"","columnWidth":"200px","size":"","labelWidth":null,"labelHidden":false,"readonly":false,"disabled":false,"hidden":false,"clearable":true,"showPassword":false,"required":true,"validation":"","validationHint":"","customClass":"","labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"minLength":null,"maxLength":null,"showWordLimit":false,"prefixIcon":"","suffixIcon":"","appendButton":false,"appendButtonDisabled":false,"buttonIcon":"el-icon-search","onCreated":"","onMounted":"","onInput":"","onChange":"","onFocus":"","onBlur":"","onValidate":""},"id":"input23031"}],"options":{"name":"gridCol25125","hidden":false,"span":12,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":""},"id":"grid-col-25125"},{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"type":"switch","icon":"switch-field","formItemFlag":true,"options":{"name":"switch96070","label":"是否保密","labelAlign":"","defaultValue":true,"columnWidth":"200px","labelWidth":null,"labelHidden":false,"disabled":false,"hidden":false,"customClass":"","labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"switchWidth":40,"activeText":"","inactiveText":"","activeColor":null,"inactiveColor":null,"onCreated":"","onMounted":"","onChange":"","onValidate":""},"id":"switch96070"}],"options":{"name":"gridCol44470","hidden":false,"span":24,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":""},"id":"grid-col-44470"},{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"type":"textarea","icon":"textarea-field","formItemFlag":true,"options":{"name":"textarea21654","label":"发件人地址","labelAlign":"","rows":3,"defaultValue":"","placeholder":"","columnWidth":"200px","size":"","labelWidth":null,"labelHidden":false,"readonly":false,"disabled":false,"hidden":false,"required":true,"validation":"","validationHint":"","customClass":"","labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"minLength":null,"maxLength":null,"showWordLimit":false,"onCreated":"","onMounted":"","onInput":"","onChange":"","onFocus":"","onBlur":"","onValidate":""},"id":"textarea21654"}],"options":{"name":"gridCol98223","hidden":false,"span":24,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":""},"id":"grid-col-98223"}],"options":{"name":"grid35834","hidden":false,"gutter":12,"customClass":""},"id":"grid35834"},{"type":"divider","icon":"divider","formItemFlag":false,"options":{"name":"divider69240","label":"","columnWidth":"200px","direction":"horizontal","contentPosition":"center","hidden":false,"customClass":"","onCreated":"","onMounted":""},"id":"divider69240"},{"type":"grid","category":"container","icon":"grid","cols":[{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"type":"input","icon":"text-field","formItemFlag":true,"options":{"name":"input113152","label":"收件人姓名111","labelAlign":"","type":"text","defaultValue":"","placeholder":"","columnWidth":"200px","size":"","labelWidth":null,"labelHidden":false,"readonly":false,"disabled":false,"hidden":false,"clearable":true,"showPassword":false,"required":true,"validation":"","validationHint":"","customClass":[],"labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"minLength":null,"maxLength":null,"showWordLimit":false,"prefixIcon":"","suffixIcon":"","appendButton":false,"appendButtonDisabled":false,"buttonIcon":"el-icon-search","onCreated":"","onMounted":"","onInput":"","onChange":"","onFocus":"","onBlur":"","onValidate":""},"id":"input113152"}],"options":{"name":"gridCol47242","hidden":false,"span":12,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":""},"id":"grid-col-47242"},{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"type":"input","icon":"text-field","formItemFlag":true,"options":{"name":"input40240","label":"收件人号码","labelAlign":"","type":"text","defaultValue":"","placeholder":"","columnWidth":"200px","size":"","labelWidth":null,"labelHidden":false,"readonly":false,"disabled":false,"hidden":false,"clearable":true,"showPassword":false,"required":true,"validation":"","validationHint":"","customClass":"","labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"minLength":null,"maxLength":null,"showWordLimit":false,"prefixIcon":"","suffixIcon":"","appendButton":false,"appendButtonDisabled":false,"buttonIcon":"el-icon-search","onCreated":"","onMounted":"","onInput":"","onChange":"","onFocus":"","onBlur":"","onValidate":""},"id":"input40240"}],"options":{"name":"gridCol27970","hidden":false,"span":12,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":""},"id":"grid-col-27970"},{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"type":"checkbox","icon":"checkbox-field","formItemFlag":true,"options":{"name":"checkbox63174","label":"接收时间段","labelAlign":"","defaultValue":[],"columnWidth":"200px","size":"","displayStyle":"inline","buttonStyle":false,"border":false,"labelWidth":null,"labelHidden":false,"disabled":false,"hidden":false,"optionItems":[{"label":"上午9:00 - 11:30","value":1},{"label":"下午12:30 - 18:00","value":2},{"label":"晚上18:00 - 21:00","value":3}],"required":true,"validation":"","validationHint":"","customClass":"","labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"onCreated":"","onMounted":"","onChange":"","onValidate":""},"id":"checkbox63174"}],"options":{"name":"gridCol74653","hidden":false,"span":24,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":""},"id":"grid-col-74653"},{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"type":"input","icon":"text-field","formItemFlag":true,"options":{"name":"input78584","label":"收件人地址","labelAlign":"","type":"text","defaultValue":"","placeholder":"","columnWidth":"200px","size":"","labelWidth":null,"labelHidden":false,"readonly":false,"disabled":false,"hidden":false,"clearable":true,"showPassword":false,"required":true,"validation":"","validationHint":"","customClass":"","labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"minLength":null,"maxLength":null,"showWordLimit":false,"prefixIcon":"","suffixIcon":"","appendButton":false,"appendButtonDisabled":false,"buttonIcon":"el-icon-search","onCreated":"","onMounted":"","onInput":"","onChange":"","onFocus":"","onBlur":"","onValidate":""},"id":"input78584"}],"options":{"name":"gridCol63781","hidden":false,"span":24,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":""},"id":"grid-col-63781"}],"options":{"name":"grid114672","hidden":false,"gutter":12,"customClass":""},"id":"grid114672"},{"type":"divider","icon":"divider","formItemFlag":false,"options":{"name":"divider75887","label":"","columnWidth":"200px","direction":"horizontal","contentPosition":"center","hidden":false,"customClass":[],"onCreated":"","onMounted":""},"id":"divider75887"},{"type":"grid","category":"container","icon":"grid","cols":[{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"type":"time-range","icon":"time-range-field","formItemFlag":true,"options":{"name":"timerange47503","label":"送货时间","labelAlign":"","defaultValue":null,"startPlaceholder":"","endPlaceholder":"","columnWidth":"200px","size":"","labelWidth":null,"labelHidden":false,"readonly":false,"disabled":false,"hidden":false,"clearable":true,"editable":false,"format":"HH:mm:ss","required":true,"validation":"","validationHint":"","customClass":"","labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"onCreated":"","onMounted":"","onChange":"","onFocus":"","onBlur":"","onValidate":""},"id":"timerange47503"}],"options":{"name":"gridCol109912","hidden":false,"span":24,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":""},"id":"grid-col-109912"},{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"type":"slider","icon":"slider-field","formItemFlag":true,"options":{"name":"slider54714","label":"价格保护","labelAlign":"","columnWidth":"200px","size":"","labelWidth":null,"labelHidden":false,"disabled":false,"hidden":false,"required":false,"validation":"","validationHint":"","customClass":[],"labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"min":0,"max":100,"step":10,"range":false,"height":null,"onCreated":"","onMounted":"","onChange":"","onValidate":"","showStops":true},"id":"slider54714"}],"options":{"name":"gridCol114653","hidden":false,"span":24,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":""},"id":"grid-col-114653"},{"type":"grid-col","category":"container","icon":"grid-col","internal":true,"widgetList":[{"type":"textarea","icon":"textarea-field","formItemFlag":true,"options":{"name":"textarea64794","label":"其他信息","labelAlign":"","rows":3,"defaultValue":"","placeholder":"","columnWidth":"200px","size":"","labelWidth":null,"labelHidden":false,"readonly":false,"disabled":false,"hidden":false,"required":false,"validation":"","validationHint":"","customClass":"","labelIconClass":null,"labelIconPosition":"rear","labelTooltip":null,"minLength":null,"maxLength":null,"showWordLimit":false,"onCreated":"","onMounted":"","onInput":"","onChange":"","onFocus":"","onBlur":"","onValidate":""},"id":"textarea64794"}],"options":{"name":"gridCol80867","hidden":false,"span":24,"offset":0,"push":0,"pull":0,"responsive":false,"md":12,"sm":12,"xs":12,"customClass":""},"id":"grid-col-80867"}],"options":{"name":"grid28709","hidden":false,"gutter":12,"customClass":""},"id":"grid28709"}],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":150,"labelPosition":"left","size":"","labelAlign":"label-right-align","cssCode":"","customClass":[],"functions":"","layoutType":"PC","jsonVersion":3,"onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}}
        this.$refs.preForm.setFormJson(newFormJson)
        this.$nextTick(() => {
          this.$refs.preForm.setFormData({"input12931":"asdf"})
        })
      },

      testSetFormData() {
        let testFD = {
          "input89263": "899668"
        }
        this.$refs.preForm.setFormData(testFD)
      },

      testReloadOptionData() {
        this.testOptionData['select001'].push({
          label: 'aaa',
          value: 888
        })

        this.$refs.preForm.reloadOptionData()
      },

      handleFormChange(fieldName, newValue, oldValue, formModel) {
        /*
        console.log('---formChange start---')
        console.log('fieldName', fieldName)
        console.log('newValue', newValue)
        console.log('oldValue', oldValue)
        console.log('formModel', formModel)
        console.log('---formChange end---')
        */

        console.log('formModel', formModel)
      },

      testOnAppendButtonClick(clickedWidget) {
        console.log('test', clickedWidget)
      },

      testOnButtonClick(button) {
        console.log('test', button)
      },

      onMyEmitTest(aaa) {
        console.log('-----', aaa)
      },

      findWidgetById(wId) {
        let foundW = null
        traverseAllWidgets(this.designer.widgetList, (w) => {
          if (w.id === wId) {
            foundW = w
          }
        })

        return foundW
      },

      onNodeTreeClick(nodeData, node, nodeEl) {
        //console.log('test', JSON.stringify(nodeData))

        if ((nodeData.selectable !== undefined) && !nodeData.selectable) {
          VfMessage.info(this.i18nt('designer.hint.currentNodeCannotBeSelected'))
        } else {
          const selectedId = nodeData.id
          const foundW = this.findWidgetById(selectedId)
          if (!!foundW) {
            this.designer.setSelected(foundW)
          }
        }
      },

    }
  }
</script>

<style lang="scss" scoped>
  .toolbar-container {
    display: flex;
    &::after {
      display: block;
      content: "";
      clear: both;
    }
  }

  .left-toolbar {
    display: flex;
    // margin-top: 4px;
    // float: left;
    font-size: 16px;
  }

  .right-toolbar {
    display: flex;
    // float: right;
    line-height: 40px;
    text-align: right;
    overflow: hidden;
    margin-left: auto;

    .right-toolbar-con {
      // text-align: left;s
      width: 600px;
    }

    :deep(.el-button) {
      margin-left: 10px;
    }

    :deep(.el-button--text) {
      font-size: 14px !important;
    }

    :deep(.svg-icon) {
      margin-left: 0;
      margin-right: 0.05em;
    }
  }

  .el-button i {
    margin-right: 3px;
  }

  .no-box-shadow {
    box-shadow: none;
  }

  .no-padding.el-tabs--border-card {
    :deep(.el-tabs__content) {
      padding: 0;
    }
  }

  // .form-render-wrapper {
  //   //height: calc(100vh - 142px);
  //   //all: revert !important; /* 防止表单继承el-dialog等外部样式，未生效，原因不明？？ */
  // }

  .form-render-wrapper.h5-layout {
    margin: 0 auto;
    width: 420px;
    border-radius: 15px;
    //border-width: 10px;
    box-shadow: 0 0 1px 10px #495060;
    height: calc(100vh - 175px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  .form-render-wrapper.pad-layout {
    margin: 0 auto;
    width: 960px;
    border-radius: 15px;
    //border-width: 10px;
    box-shadow: 0 0 1px 10px #495060;
    height: calc(100vh - 175px);
    overflow-y: auto;
    overflow-x: hidden;
  }

  .node-tree-drawer {
    :deep(.el-drawer) {
      padding: 10px;
      overflow: auto;
    }

    :deep(.el-drawer__header) {
      margin-bottom: 12px;
      padding: 5px 5px 0;
    }

    :deep(.el-drawer__body) {
      padding-left: 5px;
    }
  }

  /*.node-tree-scroll-bar {*/
  /*  height: 100%;*/
  /*  overflow: auto;*/
  /*}*/

  :deep(.node-tree) {
    .el-tree > .el-tree-node:after {
      border-top: none;
    }
    .el-tree-node {
      position: relative;
      padding-left: 12px;
    }

    .el-tree-node__content {
      padding-left: 0 !important;
    }

    .el-tree-node__expand-icon.is-leaf{
      display: none;
    }

    .el-tree-node__children {
      padding-left: 12px;
      overflow: visible !important; /* 加入此行让el-tree宽度自动撑开，超出宽度el-draw自动出现水平滚动条！ */
    }

    .el-tree-node :last-child:before {
      height: 38px;
    }

    .el-tree > .el-tree-node:before {
      border-left: none;
    }

    .el-tree > .el-tree-node:after {
      border-top: none;
    }

    .el-tree-node:before {
      content: "";
      left: -4px;
      position: absolute;
      right: auto;
      border-width: 1px;
    }

    .el-tree-node:after {
      content: "";
      left: -4px;
      position: absolute;
      right: auto;
      border-width: 1px;
    }

    .el-tree-node:before {
      border-left: 1px dashed #4386c6;
      bottom: 0px;
      height: 100%;
      top: -10px;
      width: 1px;
    }

    .el-tree-node:after {
      border-top: 1px dashed #4386c6;
      height: 20px;
      top: 12px;
      width: 16px;
    }

    .el-tree-node.is-current > .el-tree-node__content {
      background: #c2d6ea !important;
    }

    .el-tree-node__expand-icon {
      margin-left: -3px;
      padding: 6px 6px 6px 0px;
      font-size: 16px;
    }

  }
</style>
